import * as React from 'react';
import {  createTheme } from '@mui/material/styles';
import { blueGrey } from '@mui/material/colors';


/*
* - Dark Blue (Dark Mode Elements): hsl(209, 23%, 22%) => Hex	#2b3945
* - Very Dark Blue (Dark Mode Background): hsl(207, 26%, 17%) => Hex #202c37
* - Very Dark Blue (Light Mode Text): hsl(200, 15%, 8%) => Hex #111517
* - Dark Gray (Light Mode Input): hsl(0, 0%, 52%) => Hex	#858585
* - Very Light Gray (Light Mode Background): hsl(0, 0%, 98%) => Hex	#fafafa
* - White (Dark Mode Text & Light Mode Elements): hsl(0, 0%, 100%) => Hex #ffffff
*/
const getDesignTokens = (mode) => ({
  palette: {
    mode,
    primary: {
      ...blueGrey,
      ...(mode === 'dark' && {
        main: "#2b3945",
      }),
    },
    ...(mode === 'dark' && {
      background: {
        default: "#202c37",
        paper: "#202c37",
      },
    }),
    text: {
      ...(mode === 'light'
        ? {
            primary: "hsl(200, 15%, 8%)",
            secondary: blueGrey[800],
          }
        : {
            primary: 'hsl(0, 0%, 100%)',
            secondary: blueGrey[500],
          }),
    },
  },
});

const useComtomTheme = ()=>{
  const [mode, setMode ] = React.useState("dark");
  const currentTheme =  createTheme(getDesignTokens(mode));
  const [theme, setTheme ] = React.useState(currentTheme);
  React.useEffect( ()=>{ setTheme(createTheme(getDesignTokens(mode)))},[mode]);
  const toggleTeme = () => setMode( mode === "dark" ? "light" : "dark");
  return { mode, theme, toggleTeme }
}

export default useComtomTheme;